<!DOCTYPE HTML>
<html>

<head>
    <title>工作站</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="./css/main.css" />
    <noscript>
        <link rel="stylesheet" href="./css/noscript.css" /></noscript>
</head>

<body class="is-preload">

    <!-- Wrapper -->
    <div id="wrapper">

        <!-- ################################流程简介######################################### -->
        <div class="con-base introduction">
            <div class="common l-top"></div>
            <div class="common l-bottom"></div>
            <div class="common r-top"></div>
            <div class="common r-bottom"></div>

            <div class="main-points">
                <div class="common-header">
                    <div class="content">操作流程及要点</div>
                    <div class="rt-decorate"></div>
                </div>
                <!-- 流程时间轴 -->
                <div class="points-con">
                    <div class="points-item">
                        <div class="item-header">接报事件</div>
                        <ul class="item-content">
                            <li><a href="#">信息简报</a></li>
                            <li><a href="#">辅助信息</a></li>
                            <li><a href="#">辅助信息</a></li>
                        </ul>
                    </div>
                    <div class="points-item">
                        <div class="item-header">接报事件</div>
                        <ul class="item-content">
                            <li><a href="#">信息简报</a></li>
                            <li><a href="#">辅助信息</a></li>
                            <li><a href="#">辅助信息</a></li>
                            <li><a href="#">信息简报</a></li>
                            <li><a href="#">辅助信息</a></li>
                            <li><a href="#">辅助信息</a></li>
                        </ul>
                    </div>
                    <div class="points-item">
                        <div class="item-header">应急总结</div>
                        <ul class="item-content">
                        </ul>
                    </div>
                </div>

                <!-- icon图标 -->
                <div class="points-icon">
                    <div class="icon-item icon1">
                        <div class="icon-title">事件接报</div>
                    </div>
                    <div class="icon-item icon2">
                        <div class="icon-title">CCTV</div>
                    </div>
                    <div class="icon-item icon3">
                        <div class="icon-title">GIS</div>
                    </div>
                    <div class="icon-item icon4">
                        <div class="icon-title">信息发布</div>
                    </div>
                    <div class="icon-item icon5">
                        <div class="icon-title">紧急通知</div>
                    </div>
                    <div class="icon-item icon6">
                        <div class="icon-title">系统联动</div>
                    </div>
                    <div class="icon-item icon7">
                        <div class="icon-title">公交指令</div>
                    </div>
                    <div class="icon-item icon8">
                        <div class="icon-title">OCC联动</div>
                    </div>
                    <div class="icon-item icon9">
                        <div class="icon-title">沙盘联动</div>
                    </div>
                </div>
            </div>
        </div>
        <!--################################时间节点################################ -->
        <div class="timer">
            <div class="timer-con con-base">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>
                <div class="common-header">
                    <div class="content">事件动态</div>
                    <div class="rt-large"></div>
                </div>

                <div class="time-show">
                    <div class="con-base con-base1 time-oper">
                        <div class="common l-top1"></div>
                        <div class="common l-bottom1"></div>
                        <div class="common r-top1"></div>
                        <div class="common r-bottom1"></div>

                        <div class="time-name">
                            <div class="name-title">处置时间</div>
                            <div class="name-interval">5min</div>
                        </div>
                        <div class="time-detail">00:54:30</div>
                    </div>
                    <div class="con-base time-continue">
                        <div class="common l-top"></div>
                        <div class="common l-bottom"></div>
                        <div class="common r-top"></div>
                        <div class="common r-bottom"></div>

                        <div class="time-name">
                            <div class="name-title">持续时间</div>
                        </div>
                        <div class="time-detail">00:54:30</div>
                    </div>
                </div>

                <div class="con-base urgent-oper">

                    <div class="header-con">
                        <div class="common-header">
                            <div class="content">应急操作流程</div>
                            <div class="rt-decorate"></div>
                        </div>
                    </div>

                    <div class="liuch-box">
                        <div class="liuch-item">
                            <div class="item-oldbro"></div>
                            <progress id="p" value="80" max="100"></progress>
                            <div class="check-boxold">
                                <div class="checked-old"></div>
                                <div class="liuch-describe">应急启动</div>
                            </div>
                            <div class="check-boxold" style="left: 50px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe">报告领导</div>
                            </div>
                            <div class="check-boxold" style="left: 110px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe">处置阶段</div>
                            </div>
                            <div class="check-boxold" style="left: 180px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe">运营恢复</div>
                            </div>
                            <div class="check-boxold" style="right:0px;">
                                <div class="liuch-describe">应急结束</div>
                            </div>
                        </div>
                        <div class="liuch-item item-yangbro">
                            <progress id="p" value="60" max="100"></progress>
                            <div class="check-boxold">
                                <div class="checked-old"></div>
                                <div class="liuch-describe">应急启动</div>
                            </div>
                            <div class="check-boxold check-boxyang" style="left: 50px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe-small">报告领导</div>
                            </div>
                            <div class="check-boxold check-boxyang" style="left: 110px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe-top">处置阶段</div>
                            </div>
                            <div class="check-boxold check-boxyang" style="left: 180px;">
                                <div class="checked-old"></div>
                                <div class="liuch-describe-small">运营恢复</div>
                            </div>
                            <div class="check-boxold" style="right:0px;">
                                <div class="liuch-describe">应急结束</div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="con-base big-points">

                    <div class="common-header">
                        <div class="content">处置大事纪要</div>
                        <div class="rt-decorate"></div>
                    </div>

                    <div class="points-con big-points-con">
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事件接报事</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <div class="time-line"></div>
                                <span>接报事件</span>
                            </div>
                        </div>
                        <div class="big-points-item">
                            <div class="big-item-header">
                                <div class="time-point">10:08</div>
                                <span>接报事件</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- ################################媒体宣传################################ -->
        <div class="propaganda">
            <div class="con-base cctv-con">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">CCTV</div>
                    <div class="rt-large"></div>
                </div>

                <div class="img-box">
                    <img src="./images/demo-img.png" />
                </div>
            </div>

            <div class="con-base information-pub">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">信息发布追踪</div>
                    <div class="rt-large"></div>
                </div>

                <div class="information-box">
                    <div class="listItem-con">
                        <div class="listItem-header">移动终端记录</div>
                        <ul>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                        </ul>
                    </div>
                    <div class="listItem-con">
                        <div class="listItem-header">移动终端记录</div>
                        <ul>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                        </ul>
                    </div>
                    <div class="listItem-con">
                        <div class="listItem-header">移动终端记录</div>
                        <ul>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                        </ul>
                    </div>
                    <div class="listItem-con">
                        <div class="listItem-header">移动终端记录</div>
                        <ul>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                            <li>
                                <span>信息发布追踪信息发布追踪信息发布追踪</span>
                                <em>2019-10-18</em>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--################################影响################################ -->
        <div class="influence">
            <div class="con-base estimate">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">预计影响</div>
                    <div class="rt-decorate"></div>
                    <div class="rt-select"></div>
                </div>
                <div class="inf-common">
                    <p><em>影响时间：</em><span>2019-11-13 15:28:36</span></p>
                    <p><em>到：</em><span><input class="time-input" /></span></p>
                    <p><em>车站：</em></p>
                    <p>
                        复兴门 宣武门 西单 高米店北 枣园 菜市口 灵境胡同 <span>人民大学</span>高米店北 枣园 菜市口 灵境胡同
                    </p>
                </div>
            </div>

            <div class="con-base key-news">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">重点新闻</div>
                    <div class="rt-decorate"></div>
                    <div class="rt-select"></div>
                </div>

                <div class="inf-common">
                    <p><em> 新闻内容：</em><span>2019-11-13 15:28:36发生一起鼠疫病例，请有关部门马上隔离处理一起鼠疫病例，请有关部门马上隔离处理36发生一起鼠疫病例，请有关部门马上隔离处理一起鼠疫病例，请有关部门马上隔离处理</span></p>
                </div>
            </div>

            <div class="con-base key-ensure">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">重点保障</div>
                    <div class="rt-decorate"></div>
                    <div class="rt-select"></div>
                </div>

                <div class="inf-common">
                    <div class="inf-common-item">
                        <div class="key-ensure-title">晚高峰限流</div>
                        <p><span>2019-11-13 15:28:36发生一起鼠疫病例，</span></p>
                        <p><span>内蒙古锡林高原</span></p>
                    </div>
                    <div class="inf-common-item">
                        <div class="key-ensure-title">晚高峰限流</div>
                        <p><span>2019-11-13 15:28:36发生一起鼠疫病例，</span></p>
                    </div>
                    <div class="inf-common-item">
                        <div class="key-ensure-title">晚高峰限流</div>
                        <p><span>2019-11-13 15:28:36发生一起鼠疫病例，</span></p>
                    </div>
                </div>
            </div>

            <div class="con-base key-goods">
                <div class="common l-top"></div>
                <div class="common l-bottom"></div>
                <div class="common r-top"></div>
                <div class="common r-bottom"></div>

                <div class="common-header">
                    <div class="content">重点物质</div>
                    <div class="rt-decorate"></div>
                    <div class="rt-select"></div>
                </div>
                <div class="inf-common">
                    <p><span>防毒面具，发生一起鼠疫病例，</span></p>
                    <p><span>2019-11-13 15:28:36发生一起鼠疫病例，</span></p>
                </div>

            </div>
        </div>
    </div>

    <!-- BG -->
    <div id="bg"></div>

    <!-- Scripts -->
    <script src="./js/jquery-3.4.0.min.js"></script>
    <script src="./js/station.js"></script>

</body>

</html>